<template>
    <div>
        <h1>移动端1px问题</h1>
        <p>移动端1px问题是指在移动端设备上，由于像素密度的差异，导致1个物理像素被渲染为多个逻辑像素，从而导致元素的边框宽度显示为2px或3px等。</p>
        <!-- 参考京东移动端的做法，使用了伪元素 -->
        <div style="padding-left: 50px;margin-bottom: 20px;">
            <span class="border-1px">测试文字1</span>
        </div>
        <div style="padding-left: 50px;">
            <span class="border">测试文字2</span>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style>
.border {
    border: 1px solid red;
    font-size: 26px;
}
.border-1px {
    position: relative;
    font-size: 26px;
}
.border-1px::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    transform-origin: 0 0;
    border: 1px solid red;
}
</style>